<template>
  <div class="mapBox">
    <div :id="mapId"
         :style="{ width: '100%', height: '380px' }"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"
import dataJson from "@/assets/data";
export default {
  name: "chinaMap",
  props: {
    mapId: {
      type: String,
      default: "mapId",
    },
    longitude: {
      type: Number,
      default: 107.4,
    },
    latitude: {
      type: Number,
      default: 33.42,
    },
    detailAddress: {
      type: String,
      default: "未知",
    },
    province: {
      type: String,
      default: "未知",
    }
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  watch: {
    longitude() {
      this.drawLine();
    },
    latitude() {
      this.drawLine();
    },
    detailAddress() {
      this.drawLine();
    },
    province() {
      this.drawLine();
    },
  },
  mounted() {
    //console.log("111");
    echarts.registerMap("china", dataJson);
    this.drawLine();
  },
  methods: {
    drawLine() {
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}",
        },
        geo: {
          show: true,
          map: "china",
          roam: false, // 是否开启鼠标缩放和平移漫游
          center: [105, 36], // 调整地图位置
          //滚轮缩放的极限控制
          scaleLimit: {
            min: 1,
            max: 20,
          },
          zoom: 1.2, //地图放大比例
          showLegendSymbol: false, // 存在legend时显示
          //图形上的文本标签
          label: {
            normal: {
              show: false,
              textStyle: {
                color: "#000", //地图中省份字体颜色
                fontSize: 13,
              },
            },
            emphasis: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 13,
              },
            },
          },
          itemStyle: {
            // 普通样式。
            normal: {
              areaColor: "#22bfaf", //地图区域背景色
              borderColor: "#FFF", ////图形的描边颜色
              borderWidth: 0.5,
            },
            // 高亮样式。
            emphasis: {
              areaColor: "#D3D223", //鼠标悬浮区域背景色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 1,
              borderWidth: 0,
            }
          }
        },
        //设置各省份根据值(value)显示不同颜色
        visualMap: {
          show: false,  //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
          type: 'continuous',//定义为连续型   piecewise定义为分段型
          //最大最小值
          min: 0,
          max: 100,
          itemWidth: 5,
          itemHeight: 120,
          //拖拽时，是否实时更新。
          realtime: false,
          //是否显示拖拽用的手柄
          calculable: false,
          //定义在选中范围中 的视觉元素
          inRange: {
            color: ['yellow', 'red']
          }
        },
        series: [
          {
            name: "所在省",
            type: "map",
            geoIndex: 0,
            data: [
              { name: this.province, value: 1, selected: true } // 地图上默认选择所在省份
            ]
          },
          {
            name: "项目所在地",
            type: "scatter", //散点特效scatter点，effectScatter圆点扩散
            coordinateSystem: "geo", // 对应上方配置
            symbolSize: 10, ///地图中点的大小
            roam: true,
            itemStyle: {
              normal: {
                color: "#ffbb00", //地图中点的颜色
                //lineStyle: {color: '#01aaed'},
                //areaColor: "#323c48",
                //borderColor: "dodgerblue",
              },
              emphasis: {
                areaColor: "darkorange",
              },
            },
            data: [
              {
                name: this.detailAddress,
                value: [
                  // 数据项值
                  this.longitude, // 地理坐标，经度
                  this.latitude, // 地理坐标，纬度
                ],
              }
            ]
          }
        ],
      };
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.mapId));
      // 绘制图表
      myChart.setOption(option);
    },
  },
};
</script>
<style>
.el-carousel__indicators--horizontal {
  display: none;
}
</style>
<style lang="scss" scoped>
.mapBox {
  display: flex;
  justify-content: center;
}

.banner-img {
  width: 100%;
}
</style>
